<template>
	<div class="upload-pic">
		<uploader
			:options="uploadOptions"
			:autoStart="true"
			ref="uploader"
			:file-status-text="statusText"
			@files-submitted="fileSubmit"
			@file-removed="fileRemoved"
			@file-success="fileSuccess"
			@file-error="fileFail"
			class="uploader-broadcast"
		>
			<uploader-unsupport></uploader-unsupport>
			<uploader-btn :directory="false" :attrs="attrs" :single="true">
				<i class="el-icon-picture"></i>
				<span class="tips">上传图片</span>
			</uploader-btn>
		</uploader>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			statusText: {
				success: '上传成功',
				error: '上传出错',
				uploading: '正在上传...',
				paused: '暂停',
				waiting: '等待上传'
			},
			uploadOrNot: false, //是否已经上传
			uploadInfo: {
				file_name: '',
				file_path: '',
				file_size: 0
			},
			attrs: {
				accept: ['image/*']
			},
			uploadOptions: {
				target: this.BASE_URL + '/api/resource/res_upload',
				testChunks: false,
				headers: { Authorization: `Bearer ` + this.$g.access_token }
			},
			//   selectFileShow: true, //是否显示选择文件按钮
			uploadRetryTimes: 100 //文件最大重传次数
		};
	},
	created() {},
	methods: {
		//上传成功的事件
		fileSuccess(rootFile, file, message, chunk) {
			var mess = eval('(' + message + ')');
			mess = handleResponseData(mess);
			if (parseInt(mess.data.status) === 1) {
				this.uploadOrNot = true;
				this.uploadInfo.file_name = mess.data.file_name;
				this.uploadInfo.file_path = mess.data.file_path;
				this.uploadInfo.post_fix = mess.data.post_fix;
				this.$emit('picture', this.uploadInfo);
			}
		},
		fileFail(rootFile, file, message, chunk) {
			var mess = eval('(' + message + ')');
			if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
				let callbcak = data => {
					this.uploadRetryTimes--;
					this.$refs.uploader.uploader.retry(file);
				};
				this.get_access_token(callbcak);
			} else {
				this.$message.error(mess.msg);
			}
		},
		//过滤文件格式
		fileSubmit(files, fileList, event) {
			for (var i = 0; i < fileList.length; i++) {
				if (fileList[i].fileType.indexOf('image/') === -1) {
					this.$message.warning('只允许上传图片格式的文件');
					this.$refs.uploader.uploader.removeFile(fileList[i]);
				} else if (fileList[i].size > 10240000) {
					this.$message.warning('只允许上传10M以内的文件');
					this.$refs.uploader.uploader.removeFile(fileList[i]);
				} else {
					if (this.$refs.uploader.uploader.fileList.length > 1) {
						//删除第一张图片
						this.$refs.uploader.uploader.removeFile(this.$refs.uploader.uploader.fileList[0]);
					}

					this.uploadInfo.file_size = fileList[i].size;
					//   this.selectFileShow = false;
				}
			}
		},
		fileRemoved(file) {
			//   this.selectFileShow = true;
		},
		fileUpload() {
			this.$refs.uploader.uploader.upload();
		}
	}
};
</script>

<style lang="scss">
.upload-pic {
	display: inline-block;
	.uploader-btn {
		border: none;
		.el-icon-picture {
			font-size: 20px;
			color: #338efc;
			vertical-align: middle;
		}
		.tips {
			vertical-align: middle;
		}
	}
}
</style>
